<template>
	<view>
		<!-- <u-mask :show="maskShow" >
			<view class="warp">
				<view class="rect" @tap.stop></view>
			</view>
		</u-mask> -->
		
		<view class="u-margin-left-20 u-margin-right-20">
			<u-navbar :is-back="true" title="详情" :border-bottom="false"
			back-text="返回" ></u-navbar>
		    <view>
		       <!-- <u-swiper :list="swiperlist" :height="750" mode="number" effect3d effect3d-previous-margin="20" :interval="5000"></u-swiper> -->
				<!-- <u-swiper :list="swiperList" height="350"></u-swiper> -->
				<image style="width: 100%; background-color: #eeeeee;" mode="aspectFit" :src="imageUrl"></image>
		    </view>
			<view class="item u-margin-top-5">
				<view class="item-title">{{room.goodsName}}</view>
				<view class="item-price">积分: {{room.goodsIntegral}}</view>
			</view>
			<!-- <view class="wx-page">
					<view class="float-box"></view>
				</view> -->
			<!-- <view class="item" style="display: flex;align-items: center;flex-wrap: wrap;">
				 <view v-for="(item,index) in tagList" :key="index"
				  style="background-color: #f5f5f5;color: #606266;margin-right: 15rpx;
				  margin-top: 15rpx;padding: 0 10rpx;height: 60rpx;line-height: 60rpx;">
					{{item}}
				</view>
			</view> -->
			
			<view class="center" v-if="room.addStatus === 0">
				<u-button type="success" size="medium" plain @click="chakan">查看视频/文案</u-button>
			</view>
			
			<view v-if="room.addStatus === 1 && room.goodsType === 1" class = "u-row-center">
				<video
						style="width: 100%; background-color: #eeeeee;"
				        :src="room.goodsVideo"
				        objectFit="fill"  autoplay="false"
				      ></video>
			</view>
			
			<view v-if="room.addStatus === 1">
				 <view>
					{{room.goodsDesc}}
				</view>
				<u-button type="primary" shape="square" plain size="mini" @click = "cloneClick">复制</u-button>
			</view>
			
			<view style="height: 40px;width: 40px;"></view>
			
		
			<view class="navigation">
				<!-- view class="left">
					<button type="default" open-type="contact"  class="clearBtn"
					style="font-size: 14px;color: #6a6a6a;">
						<view class="item">
							<u-icon name="server-fill" :size="40"></u-icon>
							<view class="text">客服</view>	
						</view>
					</button>
					<view class="item" @click="heartHouse">
						<u-icon name="heart" :size="40" v-if="!room.heart"></u-icon>
						<u-icon name="heart-fill" color="#ff9900" :size="40" v-if="room.heart"></u-icon>
						<view class="text">收藏</view>
					</view>
					<button type="default" open-type="share"  class="clearBtn"
					style="font-size: 14px;color: #6a6a6a;">
						<view class="item">
							<u-icon name="zhuanfa" :size="40"></u-icon>
							<view class="text">分享</view>
						</view> 
					</button>
				</view> -->
				<view class="right" @click="downVedio" v-if="room.addStatus === 1 && room.goodsType === 1">
					<view class="btn">下载</view>
				</view>
			</view>
			
			<u-popup v-model="downShow" mode="center">
				<u-circle-progress active-color="#2979ff" :percent="bfb">
					<view class="u-progress-content">
							<view class="u-progress-dot"></view>
							<text class='u-progress-info'>下载中</text>
						</view>
					</u-circle-progress>
			</u-popup>
		</view>
	</view>
	
	
	
</template>

<script>
	import config from "@/common/config.js" // 全局配置文件
    export default {
        data() {
            return {
				room: {
					villageName:'',
					houseNum:'',
					houseHall:'',
					toiletNum:'',
					roomType:'',
					direction:'',
					price:'',
					introduce:'',
					heart:false,
				},
				village: {
					year:'',
					type:'',
					green:'',
				},
                swiperlist: [],
                tagList: [],
				//评价列表
				evaluList:[],
				user: {},
				longitude: 120.14,
				latitude: 30.35, 
				distance:0,
				//自己的评论
				ownevalu:'',
				houseId:null,
				evalsize:0,
				havem:false,
				evaluate:'',
				credt:'',
				show: true,
				jd:'1%',
				imageUrl:'',
				maskShow: true,
				xzStatus: false,
				downShow: false,
				bfb: 0
            }
        },
		onLoad: function (option) {
			let houseId = option.houseId //上个页面传递的参数。
			this.houseId =houseId
			// 渲染当前房源信息
			this.findHouseById(houseId);
		},
        methods: {
			heartHouse(){
				// 判断是否有userId
				let lifeData = uni.getStorageSync('lifeData');
				let vuex_user = lifeData.vuex_user
				if(!vuex_user){
					// 没有userId 则跳转到登录
					return uni.reLaunch({
						url:'../login/login'
					})
				}
				// 收藏
				let url = "api/houseApi/saveHeart";
				this.$u.post(url, {
					heart: this.room.heart,
					houseId: this.room.id,
					userId: vuex_user.user.userId,
				}).then(result => {
					this.room.heart = !this.room.heart
					this.$mytip.toast(result.msg)
				});
			},
			goHome(){
				uni.reLaunch({
					url:'../index/index'
				})
			},
            clickItem() {
                //拨打固定电话
                // uni.makePhoneCall({
                // 	phoneNumber: this.room.agentPhone,
                // });
				this.$mytip.toast('未完成')
            },
			findHouseById(houseId){
				let url = "api/goods/info";
				this.$u.get(url, {
					id: houseId
				}).then(result => {
					let room = result.data
					
					let aa = {
						image : config.staticUrl+room.goodsImage
					}
					this.imageUrl = config.staticUrl+room.goodsImage
					this.swiperlist[0] = aa
					this.tagList[0] = '视频'
					// if(!room.agentAvatar.includes(config.staticUrl)){
					// 	room.agentAvatar = config.staticUrl+room.agentAvatar
					// }
					// this.user = room.user
					// this.village = room.village
					room.goodsVideo = config.staticUrl+room.goodsVideo
					this.room = room
				});
			},
			chakan(){
				let url = "api/goods/saveOrder";
				this.$u.get(url, {
					id: this.houseId
				}).then(result => {
					this.$mytip.toast('成功')
					this.findHouseById(this.houseId);
				});
			},
			downVedio(){
				this.downLoadImg(this.room.goodsVideo , true)
			},
			downLoadImg(url,is_video) {
					// uni.showLoading({
					// 	title: '正在下载：' + this.jd
					// });
					this.downShow = true
					this.bfb = 1
					const downloadTask = uni.downloadFile({
						url : url,
						success: (res) => {
							// uni.hideLoading();
							this.downShow = false
							if (res.statusCode === 200) {
								if(is_video==false){
									// 图片下载
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.showToast({
												title: "已保存到相册",
												icon: "none"
											});
										},
										fail: function() {
											uni.showToast({
												title: "保存失败，请稍后重试",
												icon: "none"
											});
										}
									});
								}else{
									// 视频下载
									uni.saveVideoToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.showToast({
												title: "已保存到相册",
												icon: "none"
											});
										},
										fail: function() {
											uni.showToast({
												title: "保存失败，请稍后重试",
												icon: "none"
											});
										}
									})
								}
								
							}else {
								uni.showToast({title:"资源格式错误，请联系管理员",icon: "none"});
							}
						},
						fail: (err) => {
							uni.showToast({title: "保存失败，请联系管理员",icon: "none"});
						}
					})
					
					downloadTask.onProgressUpdate((res) => {
						// var x = res.totalBytesWritten / res.totalBytesExpectedToWrite
						// console.log("========下载========", res)
						// uni.hideLoading();
						// uni.showLoading({
						// 	title: '正在下载：' + res.progress + '%'
						// });
						this.bfb = res.progress
						if(res.progress > 90 && this.xzStatus === false){
							this.xzStatus = true
							let url = "api/goods/downOver";
							this.$u.get(url, {
								id: this.houseId
							}).then(result => {
								
							});
						}
					});
				},
				/*
				 * 引导用户开启权限
				 */
				isAuth() {
					uni.showModal({
						content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting({
									success: (result) => {
										console.log(result.authSetting);
									}
								});
							}
						}
					});
				},
				cloneClick() {
								// 设置系统剪贴板的内容
								uni.setClipboardData({
									data: this.room.goodsDesc,
									success: () => {
										uni.showToast({
											title: '复制成功'
										})
									}
								})
							}
        }
    }
</script>

<style>
    /* page不能写带scope的style标签中，否则无效 */
    page {
        background-color: rgb(255, 255, 255);
    }
</style>


<style lang="scss" scoped>
	map {
		width: 100%;
		height: 350rpx;
	}
	
	.item{
		padding: 25rpx;
		line-height: 80rpx;
		margin-top: -30rpx;
	}
	
    .item-title {
        font-size: 42rpx;
        color: $u-main-color;
        font-weight: bold;
    }

    .item-price {
        font-weight: normal;
        font-size: 45rpx;
        color: $u-type-warning;
    }

    .item-desc {
        font-weight: normal;
        font-size: 36rpx;
        color: $u-tips-color;
    }
	
	.arrow-right{
		position: absolute;
		top: 80rpx;
		right: 28rpx;
		font-weight: normal;
		font-size: 28rpx;
		color: $u-tips-color;
		.phone{
			width: 90rpx;height:90rpx;
			border-radius: 100%;
			box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.wayClass{
		color: #606266;
		padding: 30rpx;
		line-height: 50rpx;
	}

	.clearBtn{
		margin:0;
		padding: 0;
		line-height: 1;
		background-color: #FFFFFF;
	}
	
	.clearBtn::after{
	    position: unset !important;
	    border: unset;
	}
	
	.navigation {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0rpx 15rpx;
		background-color: #ffffff;
		box-shadow:0 -1px 1px 0 rgba(0, 0, 0, 0.05);
		z-index: 9999;
		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 38rpx;
			font-size: 14px;
			color: #6a6a6a;
			.item {
				display: flex;
				.text{
					margin-left: 4rpx;
				}
			}
		}
		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			.btn {
				line-height: 66rpx;
				margin-left: 30rpx;
				padding: 5rpx 50rpx;
				color: #ffffff;
				border-radius:  36rpx;
				background-color: #2979ff;
			}
		}
		
		.u-progress-content {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.u-progress-dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #fb9126;
			}
			
			.u-progress-info {
				font-size: 28rpx;
				padding-left: 16rpx;
				letter-spacing: 2rpx
			}
			
		.wx-page {
				width: 750rpx;
				height: 6000rpx;
			}
		 
			.float-box {
				position: fixed;
				width: 100rpx;
				height: 100rpx;
				right: 30rpx;
				bottom: 150rpx;
				border-radius: 50%;
				background-color: #ff6000;
			}
	}
</style>
